<!--用户管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;float: left">用户信息</span>
    <el-button @click="dialogVisibleUser=true" type="primary" color="#5B63B7"
               style="float:right;margin-top:13px;">新建用户</el-button>
  </div>

  <!-- 新增应聘者弹窗 -->
  <el-dialog :title="dialogTitleUser" style="width:600px;padding:40px;" v-model="dialogVisibleUser" :before-close="handleCloseUser">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
<!--          <p><span class="tips-must-do">*</span>身份</p>-->
          <el-form-item label="*身份">
            <el-select placeholder="请选择身份" v-model="saveSeekerForm.identityId">
              <el-option v-for="item in levelOption" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入真实姓名" v-model="saveSeekerForm.realName" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*用户名">
            <el-input placeholder="请输入用户名" v-model="saveSeekerForm.username" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveSeekerForm.nickname" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveSeekerForm.email" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*手机号">
            <el-input placeholder="请输入手机号" v-model="saveSeekerForm.phone" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*微信号">
            <el-input placeholder="请输入微信号" v-model="saveSeekerForm.wechatId" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-radio-group v-model="saveSeekerForm.gender" :disabled="saveSeekerForm.identityId==20">
              <el-radio value="男" border style="margin: 0;">男</el-radio>
              <el-radio value="女" border>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    ---------------------------------------------------------------------------------------------------------------
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="身份">
            <el-select placeholder="请选择身份" v-model="saveSeekerForm.identity" :disabled="saveSeekerForm.identityId==20">
              <el-option v-for="item in identityOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="求职状态">
            <el-input placeholder="请输入求职状态" v-model="saveSeekerForm.lookforStatus" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="出生地">
            <el-input placeholder="请输入出生地" v-model="saveSeekerForm.birthdayPlace" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="个人优势">
            <el-input placeholder="请输入个人优势" v-model="saveSeekerForm.personalAdvantage" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="期望岗位">
            <el-input placeholder="请输入期望岗位" v-model="saveSeekerForm.expectedJob" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="期望城市">
            <el-input placeholder="请输入期望城市" v-model="saveSeekerForm.expectedCity" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="最低期望薪资">
            <el-input placeholder="请输入最低期望薪资" v-model="saveSeekerForm.expectedSalaryMin" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高期望薪资">
            <el-input placeholder="请输入最高期望薪资" v-model="saveSeekerForm.expectedSalaryMax" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="主修专业">
            <el-input placeholder="请输入主修专业" v-model="saveSeekerForm.major" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学位">
            <el-input placeholder="请输入学位" v-model="saveSeekerForm.degree" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="教育背景">
            <el-input placeholder="请输入教育背景" v-model="saveSeekerForm.educationBackground" :disabled="saveSeekerForm.identityId==20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="*雇佣类型">
            <el-select placeholder="请选择雇佣类型" v-model="saveSeekerForm.employmentType" :disabled="saveSeekerForm.identityId==20">
              <el-option v-for="item in OptionStatu" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="*毕业时间">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveSeekerForm.graduateTime"
                    :disabled="saveSeekerForm.identityId==20"
                    type="date"
                    placeholder="请选择毕业时间"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期">
            <div class="demo-datetime-picker">
              <div class="block">
                <el-date-picker
                    v-model="saveSeekerForm.birthday"
                    :disabled="saveSeekerForm.identityId==20"
                    type="date"
                    placeholder="请选择出生年月"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                />
              </div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="预计可到岗日期">
          <div class="demo-datetime-picker">
            <div class="block">
              <el-date-picker
                  v-model="saveSeekerForm.availableStartDate"
                  :disabled="saveSeekerForm.identityId==20"
                  type="date"
                  placeholder="请选择预计可到岗日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
              />
            </div>
          </div>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleCloseUser()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveSeeker()" :disabled="saveSeekerForm.identityId==20">保存</el-button>
    </template>
  </el-dialog>



  <!-- 编辑用户弹窗 -->
  <el-dialog :title="dialogTitle" style="width:600px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
    <el-form label-width="50px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="身份">
            <el-select placeholder="请选择身份" v-model="saveUserForm.identityId">
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value" :disabled="saveUserForm.identityId!=null"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input placeholder="请输入真实姓名" v-model="saveUserForm.realName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="昵称">
            <el-input placeholder="请输入昵称" v-model="saveUserForm.nickname"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="微信号">
            <el-input placeholder="请输入微信号" v-model="saveUserForm.wechatId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="saveUserForm.password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
      <el-col :span="12">
        <el-form-item label="性别">
          <el-radio-group v-model="saveUserForm.gender">
            <el-radio value="男" border style="margin: 0;">男</el-radio>
            <el-radio value="女" border>女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button  @click="handleClose()" style="color: #5B63B7;" class="custom-hover-color">取消</el-button>
      <el-button type="primary" color="#5B63B7" @click="saveUser()">保存</el-button>
    </template>
  </el-dialog>


  <!-- 用户查询卡片 -->
  <el-card style="margin:20px;height: 120px;">
    <el-form :inline="true">
      <el-form-item label="昵称搜索" style="float: left">
        <el-input placeholder="输入昵称" style="width:220px;"
                  v-model="searchUserForm.nickname" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="身份搜索" style="width:290px;float: left">
        <el-select placeholder="请选择用户身份"
                   v-model="searchUserForm.identityId" @change="loadUser">
          <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="真实姓名搜索" style="float: left">
        <el-input placeholder="输入用户名" style="width:220px;"
                  v-model="searchUserForm.realName" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="状态搜索" style="width:290px;float: left">
        <el-select placeholder="请选择用户状态"
                   v-model="searchUserForm.status" @change="loadUser">
          <el-option v-for="item in OptionStatus" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别搜索" style="width:290px;float: left">
        <el-select placeholder="请输入用户性别"
                   v-model="searchUserForm.gender" @change="loadUser">
          <el-option label="女" value="女"/>
          <el-option label="男" value="男"/>
        </el-select>
      </el-form-item>
      <el-form-item style="float: left;">
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser" color="#5B63B7">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>


  <!-- 用户信息表格 -->
  <el-card style="margin:20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="username" label="用户名" align="center"/>
<!--      <el-table-column prop="userId" label="用户id" align="center"/>-->
      <el-table-column prop="nickname" label="昵称" align="center"/>
      <el-table-column prop="password" label="密码" align="center"/>
      <el-table-column prop="realName" label="真实姓名" align="center"/>
      <el-table-column prop="email" label="邮箱" align="center"/>
      <el-table-column prop="phone" label="手机号" align="center"/>
      <el-table-column prop="wechatId" label="微信号" align="center"/>
      <el-table-column prop="gender" label="性别" align="center"/>
      <el-table-column prop="status" label="用户状态" align="center"/>
      <el-table-column prop="identityId" label="用户身份" align="center" :formatter="userIdentity"/>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center">
<!--      <el-table-column prop="userImg" label="头像" align="center">-->
<!--        <template #default="scope">-->
<!--          &lt;!&ndash;active-value="1" inactive-value="0"设置开关激活的值为1,关闭的值为0开关提交的值与status双向绑定&ndash;&gt;-->
<!--          <el-switch active-value="1" inactive-value="0" v-model="scope.row.status"></el-switch>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
<!--          <el-button link type="primary" size="small">密码重置</el-button>-->
          <el-button link type="primary" size="small" @click="editUser(scope.row.userId)" :disabled="scope.row.status == '注销'" style="color:#5B63B7">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteUser(scope.row.userId)" v-if="scope.row.status != '注销'" style="color:#5B63B7">注销</el-button>
          <el-button link type="primary" size="small" @click="UseUser(scope.row.userId)" v-else-if="scope.row.status == '注销'" style="color:#5B63B7">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//控制编辑用户弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('编辑用户');
//控制新增用户弹窗是否显示
const dialogVisibleUser = ref(false);
//定义变量控制dialog的标题
const dialogTitleUser = ref('新建用户');
//用户职业
const levelOptions = ref([
  {label: '求职者',value: '10'},
  {label: '招聘者',value: '20'},
])
const levelOption = ref([
  {label: '求职者',value: '10'},
  {label: '招聘者',value: '20'},
])
//用户状态
const OptionStatus = ref([
  {label: '在线',value: '在线'},
  {label: '不在线',value: '不在线'},
  {label: '注销',value: '注销'},
  {label: '正常',value: '正常'},
  {label: '禁言',value: '禁言'},
])
const OptionStatu = ref([
  {label: '全职',value: '全职'},
  {label: '兼职',value: '兼职'},
  {label: '合同工',value: '合同工'},
  {label: '实习',value: '实习'},
])
const identityOptions = ref([
  {label: '在校生',value: '在校生'},
  {label: '应届毕业生',value: '应届毕业生'},
])
//状态码的格式化函数
const userIdentity = (row, column,cellValue,index) => {
  if (cellValue==10){
    cellValue= '求职者';
  }else if (cellValue==20){
    cellValue= '招聘者';
  }
  return cellValue;
}
//准备对象用来收集新增/修改员工的表单信息
const saveUserForm = ref({
  userId:'',
  username: '',
  nickname:'',
  password:'',
  email: '',
  phone:'',
  realName:'',
  gender: '男',
  status:'',
  createTime:'',
  updateTime:'',
  identityId:'',
  wechatId:'',
  userImg:''
});

const saveSeekerForm = ref({
  userId:'',
  username: '',
  nickname:'',
  password:'',
  email: '',
  phone:'',
  realName:'',
  gender: '男',
  status:'',
  createTime:'',
  updateTime:'',
  identityId:'',
  wechatId:'',
  userImg:'',

  identity: '',
  lookforStatus:'',
  personalAdvantage:'',
  graduateTime: '',
  birthday:'',
  birthdayPlace:'',
  expectedJob: '',
  expectedCity:'',
  expectedSalaryMin:'',
  expectedSalaryMax:'',
  employmentType:'',
  educationBackground:'',
  major:'',
  degree:'',
  availableStartDate:''
});

//新增员工
const saveUser = () => {
  let data = JSON.stringify(saveUserForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/user/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisible.value = false;//关闭弹窗
      saveUserForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadUser();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);

    }
  })
}

const saveSeeker = () => {
  let data = JSON.stringify(saveSeekerForm.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/user/save',data, {
    headers: {
      'Content-Type': 'application/json' // 明确指定请求体类型为 JSON
    }
  }).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('保存成功!');
      dialogVisibleUser.value = false;//关闭弹窗
      saveSeekerForm.value={};//清空输入的数据,防止新增成功后打开弹窗还是之前的数据
      loadUser();//加载用户列表方法
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//实现取消按钮的功能
const handleClose = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisible.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveUserForm.value={};
  }
}

//实现取消按钮的功能
const handleCloseUser = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisibleUser.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveSeekerForm.value={};
  }
}

//定义数组用来装用户列表信息
const userArr = ref([]);
//定义对象保存查询条件
const searchUserForm = ref({nickname: '', realName: '',identityId:'',status:'',gender:''});
const loadUser = () => {
  //如果传入了查询条件，则根据条件查询，没有条件，默认查询所有员工信息
  let data = qs.stringify(searchUserForm.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/user/select?'+data).then((response) => {
    if (response.data.code === 2000) {
      userArr.value = response.data.data;
      console.log(userArr.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//页面一加载立即调用
onMounted(() => {
  searchUserForm.value={};
  loadUser();//加载员工列表
})

//重置用户搜索信息
const resetSearch = ()=>{
  searchUserForm.value={};
  loadUser();
}


//编辑员工
const editUser = (userId) =>{
  console.log(userId);
  //修改弹窗标题并打开弹窗
  dialogTitle.value = '编辑用户';
  dialogVisible.value = true;
  //根据id查询要修改的当前员工的信息
  axios.get(BASE_URL+'/v1/user/select?userId='+userId).then((response) => {
    if (response.data.code === 2000) {
      //若请求成功，赋值给saveUserForm，因为后端返回的是list，所以这里要data[0]
      saveUserForm.value = response.data.data[0];
      console.log(response.data.data)
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

//删除用户
const deleteUser = (userId)=>{
  console.log(userId);
  // if(confirm('您确认要注销此用户吗?')){
    axios.post(BASE_URL+'/v1/user/delete/'+userId).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('注销成功!');
        loadUser();
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  // }
}

//启动用户
const UseUser = (userId)=>{
  console.log(userId);
  // if(confirm('您确认要启用此用户吗?')){
    axios.post(BASE_URL+'/v1/user/use/'+userId).then((response) => {
      if (response.data.code === 2000) {
        ElMessage.success('启用成功!');
        loadUser();
      } else {
        ElMessage.error("该用户公司已注销");
      }
    })
  // }
}
</script>

<style scoped>
.custom-hover-color:hover {
  color: #5B63B7; /* 悬停时的文本颜色 */
  background-color: #f5f5f5;
  border-color: #cccccc;
}
/*出生日期*/
.demo-datetime-picker {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
.tips-must-do{
  color: #ec3737;
  font-size: 25px;
}
</style>